<template>
  <div>
    <div style="text-align: center">审核页面</div>
    <!-- 条件查询表单 -->
    <div>
      <el-form :inline="true" :model="serveAuditDTO" class="demo-form-inline">
        <el-form-item label="状态">
          <el-select
            v-model="serveAuditDTO.state"
            placeholder="状态"
            style="width: 200px"
          >
            <el-option label="待审核" value="待审核" />
            <el-option label="通过" value="通过" />
            <el-option label="不通过" value="不通过" />
            <el-option label="驳回" value="驳回" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核人">
          <el-input
            v-model="serveAuditDTO.auditperson"
            placeholder="审核人"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryAudit">查询</el-button>
          <el-button type="primary" @click="resetAudit">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据展示 -->
    <div>
      <el-table :data="serveAudits" style="width: 100%" height="100%">
        <el-table-column
          label="审核内容"
          prop="auditcontent"
          width="150"
          align="center"
        />
        <el-table-column
          label="审核状态"
          prop="state"
          width="180"
          align="center"
        >
          <template v-slot="scope">
            <el-tag
              :type="
                scope.row.state === '通过'
                  ? 'primary'
                  : scope.row.state === '待审核'
                  ? 'success'
                  : 'danger'
              "
              disable-transitions
              >{{ scope.row.state }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          label="审核人"
          prop="auditperson"
          width="180"
          align="center"
        />
        <el-table-column
          label="申请时间"
          prop="applytime"
          width="180"
          align="center"
        />
        <el-table-column
          label="审核时间"
          prop="audittime"
          width="180"
          align="center"
        />
        <el-table-column label="操作" min-width="180" align="center">
          <template #default="scope">
            <el-button
              link
              type="success"
              size="small"
              @click.prevent="auditPass(scope.row)"
              v-if="scope.row.state === '待审核'"
            >
              审核通过
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="auditNoPass(scope.row)"
              v-if="scope.row.state === '待审核'"
            >
              审核不通过
            </el-button>
            <el-button
              link
              type="danger"
              size="small"
              @click.prevent="auditReject(scope.row)"
              v-if="scope.row.state === '待审核'"
            >
              审核驳回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页控件 -->
    <div class="block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pageIndex"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7]"
        layout="sizes, prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serveAuditDTO: {
        state: "",
        auditperson: "",
      },
      pageIndex: 1,
      pageSize: 3,
      total: 0,
      pages: 0,
      serveAudits: [],
      serveAudit: {
        state: "",
      },
    };
  },
  mounted() {
    this.getAll();
  },
  methods: {
    //审核通过
    auditPass(row) {
      this.$confirm("是否要通过审核？", "审核确认", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.$message.success(`审核已通过`);
          this.serveAudit = row;
          this.serveAudit.state = "通过";
          this.modifyAudit();
        })
        .catch(() => {
          this.$message.info("审核已取消");
        });
    },

    //审核不通过
    auditNoPass(row) {
      this.$confirm("是否要不通过审核？", "审核确认", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.$message.success(`审核已不通过`);
          this.serveAudit = row;
          this.serveAudit.state = "不通过";
          this.modifyAudit();
        })
        .catch(() => {
          this.$message.info("审核已取消");
        });
    },

    //审核驳回
    auditReject(row) {
      this.$confirm("是否要驳回审核？", "审核确认", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.$message.success(`审核已驳回`);
          this.serveAudit = row;
          this.serveAudit.state = "驳回";
          this.modifyAudit();
        })
        .catch(() => {
          this.$message.info("审核已取消");
        });
    },

    //修改审核
    modifyAudit() {
      console.log(this.serveAudit);
      this.$axios.put("/serveaudit/", this.serveAudit).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("审核成功");
          this.getAll();
        } else {
          this.$message.error("审核失败");
        }
      });
    },

    //条件查询审核
    queryAudit() {
      this.getAll();
    },

    //重置条件查询
    resetAudit() {
      this.serveAuditDTO = {
        state: "",
        auditperson: "",
      };
      this.pageIndex = 1;
      this.pageSize = 3;
      this.getAll();
    },

    //查询全部审核
    getAll() {
      this.$axios
        .post(
          "/serveaudit/" + this.pageIndex + "/" + this.pageSize,
          this.serveAuditDTO
        )
        .then((res) => {
          console.log(res.data.data);
          this.total = res.data.data.total;
          this.pages = res.data.data.pages;
          this.serveAudits = res.data.data.records;
        });
    },

    //每页显示几条数据
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getAll();
    },

    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.getAll();
    },
  },
};
</script>

<style>
</style>